<template>
	<view>
		<view v-if="inline === 1" class="">
			<view v-if="battery>=80 && battery <=100" class="hundred-percent-battery"
				:style="{'--color': '#37c662','--bgcolor':'#ccf1d7'}">
				<text class="text">{{battery}}</text>
				</view>
			<view v-else-if="battery >= 20 && battery < 80" class="twenty-percent-battery"
				:style="{'--color': '#37c662','--bgcolor':'#ccf1d7'}">
				<text class="text">{{battery}}</text>
				</view>
			<view v-else-if="battery >= 0 && battery < 20" class="zero-percent-battery"
				:style="{'--color': '#37c662','--bgcolor':'#ccf1d7'}">
				<text class="text">{{battery}}</text>
			</view>
		</view>
		<view v-else-if="inline===0" class="battery"
			:style="{'--color': '#898989','--bgcolor':'#ffffff'}">
			<text class="text">{{battery}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		name: 'Surplus2',
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		props: {
			inline: {
				type: [String, Number],
				default: -1
			},
			battery: {
				type: [String, Number],
				default: -1
			}
		},
		mounted() {}
	}
</script>

<style scoped>
	.view {
		font-family: sans-serif;
		text-transform: uppercase;
		font-weight: bold;
	}

	.charging,
	.battery,
	.hundred-percent-battery,
	.twenty-percent-battery,
	.zero-percent-battery {
		margin: 0 auto;
		width: 40rpx;
		height: 32rpx;
		background-color: #FFFFFF;
		border-width: 1rpx;
		border-style: solid;
		border-radius: 4rpx;
		border-color: var(--color);
		position: relative;
	}

	.charging:before,
	.battery:before,
	.hundred-percent-battery:before,
	.twenty-percent-battery:before,
	.zero-percent-battery:before {
		position: absolute;
		content: '';
		display: block;
		width: 6rpx;
		height: 6rpx;
		right: -8rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: var(--color);
	}

	.battery:after,
	.hundred-percent-battery:after,
	.twenty-percent-battery:after,
	.zero-percent-battery:after {
		position: absolute;
		content: "";
		left: 5rpx;
		top: 5rpx;
		bottom: 5rpx;
		background-color: var(--bgcolor);
		border-radius: 3rpx;
	}

	.hundred-percent-battery:after {
		right: 5rpx;
	}

	.twenty-percent-battery:after {
		right: 15rpx;
	}

	.zero-percent-battery:after {
		right: 20rpx;
	}
	
	.text{
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		color: var(--color);
		font-size: 18rpx;
	}

	.charging:after {
		position: absolute;
		content: '⌁';
		left: 0;
		top: 40%;
		right: 0;
		transform: translateY(-50%);
		color: var(--color);
		font-size: 42rpx;
	}
</style>
